.login {
	width: 100%;
	height: 100%;
	min-height: 700px;
	// background-image: url('../../assets/images/login-bg.jpg');
	background-size: 100% 100%;
	overflow: hidden;
	background-repeat: no-repeat;
	position: relative;

	.login-content-box {
		width: 97%;
		height: 94%;
		padding: 0 4% 0 20px;
		background-color: rgba(225, 225, 225, .3) !important;
		position: absolute;
		overflow: hidden;
		border-radius: 10px;
		top: 3%;
		left: 1.5%;

		// animation: slideInLeftToRight  1s ease-in-out;
		.logo_left_top {
			// width: 250px;
			margin-top: 15px;
			font-weight: 800;
			font-size: 30px;
			animation: slideInLeftToRight 1s ease-in-out;
			img{
				height: 60px;
			}
		}

		.login-content {
			width: 500px;
			height: 450px;
			background: #fff;
			// margin: 200px auto;
			margin-left: 60%;
			margin-top: 10%;
			padding: 45px 40px;
			border-radius: 5px;
			// background: rgba(255, 255, 255, 0.2);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			animation: slideInRightToLeft 1s ease-in-out;
		}

		.login-content>div {
			width: 100%;
		}

		.haed {
			display: flex;
			margin-bottom: 30px;
			align-items: center;
			justify-content: center;
			// border-bottom: 4px solid #fff;
			padding-bottom: 5px;
			width: 80% !important;
			// animation: haed 2s infinite;
			position: relative;

			.logoImg {
				width: 40px;
				margin-top: 1px;
			}

			h2 {
				// color: var(--main-color);
				animation: slideInLeftToRight 0.8s ease-in-out;
			}
		}

		@keyframes haed {
			30% {
				opacity: 0.3;
			}
		}


		.logoImg {
			width: 45px;
			margin-top: -5px;
		}

		h2 {
			font-size: 30px;
			text-align: center;
			font-weight: bold;
			// color: #fff;
			margin: 0;
			margin-left: 10px;
		}

		.login-form .login-form-button {
			margin-top: 30px;
			width: 100%;
			height: 44px
		}

		.author {
			color: #fff;
			text-align: center;
			padding-top: 60px;
			animation: author 2s infinite;
			position: absolute;
			left: 50%;
			bottom: 0;
			margin-left: -260px;
		}

		@keyframes author {
			50% {
				opacity: 0.3;
			}
		}

		.author a {
			color: var(--main-bg);
		}

		.author p {
			font-size: 12px;
		}

		/* 跑马灯特效 */
		.login-content,
		.login-content::before,
		.login-content::after {
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			border-radius: 5px;
		}

		.login-content::before,
		.login-content::after {
			content: "";
			margin: -1.6%;
			box-shadow: inset 0 0 0 2px;
			animation: clipm 8s linear infinite;
			color: var(--main-bg)
		}

		.login-content::before {
			animation-delay: -4s;
		}

		/* .login-content:hover::after,
.login-content:hover::before {
  background-color: rgba(255, 0, 0, 0.3);
} */
		@keyframes clipm {
			0% {
				clip: rect(0px, 520px, 2px, 0px);
			}

			25% {
				clip: rect(0px, 2px, 480px, 0px);
			}

			50% {
				clip: rect(450px, 520px, 520px, 0px);
			}

			75% {
				clip: rect(0px, 520px, 480px, 480px);
			}

			100% {
				clip: rect(0px, 520px, 2px, 0px);
			}
		}

		.ant-btn-primary {
			z-index: 1;
			position: relative;
			overflow: hidden;
		}

		/* 登录按钮 */
		.ant-btn-primary:hover {
			cursor: pointer;
		}

		.ant-btn-primary::after {
			content: "";
			z-index: -1;
			background-color: hsla(0, 0%, 100%, 0.2);
			position: absolute;
			top: -50%;
			bottom: -50%;
			width: 1.25em;
			transform: translate3d(-1646%, 0, 0) rotate(35deg);
		}

		.ant-btn-primary:hover::after {
			transition: transform 0.45s ease-in-out;
			transform: translate3d(1646%, 0, 0) rotate(35deg);
		}

		/* 标题动画 */
		.haed::before {
			content: "";
			position: absolute;
			bottom: -4px;
			left: 0;
			right: 0;
			height: 4px;
			background-color: var(--main-bg);
			transform-origin: bottom right;
			transform: scaleX(0);
			transition: transform 0.5s ease;
		}

		.login-content:hover .haed::before {
			transform-origin: bottom left;
			transform: scaleX(1);
		}
	}

	.yanzhengma {
		width: 270px;
	}

	.author {
		position: fixed;
		bottom: 30px;
		right: 50px;
	}

	@keyframes slideInLeftToRight {
		0% {
			transform: translateX(-100%);
			/* Start from the left */
			opacity: 0;
			/* Optionally, fade in as it moves */
		}

		100% {
			transform: translateX(0);
			/* Move to the right */
			opacity: 1;
			/* Fully visible */
		}
	}

	@keyframes slideInRightToLeft {
		0% {
			transform: translateX(100%);
			/* Start from the right */
			opacity: 0;
			/* Optionally, fade in as it moves */
		}

		100% {
			transform: translateX(0);
			/* Move to the left */
			opacity: 1;
			/* Fully visible */
		}
	}
}